<template>
  <div class="home">
    <PageHeader></PageHeader>
    <div class="block text-center" m="t-4">
      <el-carousel trigger="click" height="150px">
        <el-carousel-item v-for="item in 4" :key="item">
          <h3 class="small justify-center" text="2xl">{{ item }}</h3>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="tab page-auto">
      <span class="current">全部</span>
      <span>工会活动</span>
      <span>工资杯</span>
    </div>
    <div class="activity page-auto">
      <img src="@/assets/images/pic/logo.png" alt="">
      <img src="@/assets/images/pic/logo.png" alt="">
      <img src="@/assets/images/pic/logo.png" alt="">
      <img src="@/assets/images/pic/logo.png" alt="">
      <img src="@/assets/images/pic/logo.png" alt="">
      <img src="@/assets/images/pic/logo.png" alt="">
      <img src="@/assets/images/pic/logo.png" alt="">
      <img src="@/assets/images/pic/logo.png" alt="">
    </div>
    <PageBottom></PageBottom>
  </div>
</template>

<script setup>
import { useRouter, useRoute } from 'vue-router'
import PageHeader from '@/components/page-header/index.vue'
import PageBottom from '@/components/page-bottom/index.vue'
import { createChat } from '@/api/simulator'
const router = useRouter()
const route = useRoute()


</script>

<style lang="scss">


.page-auto {
  width: 1000px;
  margin: 0 auto;
}
.home {
  .tab {
    width: 450px;
    height: 60px;
    background: url(@/assets/images/pic/home-tab.png) no-repeat;
    background-size: contain;
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
    align-items: center;
    margin-top: 66px;
    span {
      font-size: 28px;
      padding: 0 30px;
      height: 38px;
      line-height: 38px;
      cursor: pointer;
    }
    .current {
      background: #FFADA9;
      border-radius: 50px;
      border: 1px solid #000000;
    }
  }
  .activity {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 50px;
    img {
      width: 228px;
      height: 164px;
      border-radius: 6px;
      border: 2px solid #000;
    }
  }
}
.demonstration {
  color: var(--el-text-color-secondary);
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}



</style>
